<template>
  <div class="app-container">
    <div class="build-container">
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1" description="基本配置"></el-step>
        <el-step title="步骤 2" description="选择任务模板"></el-step>
      </el-steps>

      <div v-show="active===1" class="step1">
        <BaseConfig ref="baseConfig"/>
      </div>
      <div v-show="active===2" class="step2">
        <JobTemplateList ref="jobTemplateList"/>
      </div>

      <el-button :disabled="active===1" style="margin-top: 12px;" @click="last">上一步</el-button>
      <el-button v-show="active <= 2" type="primary" style="margin-top: 12px;margin-bottom: 12px;" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
import BaseConfig from './baseConfig.vue'
import JobTemplateList from './jobTemplateList.vue'

export default {
  components: { BaseConfig, JobTemplateList },
  data() {
    return {
      active: 1 // 当前步骤
    }
  },
  methods: {
    next() {
      if (this.active === 1) {
        this.$refs.baseConfig.handleSubmit().then((valid) => {
          if (valid) {
            this.active++
          }
        })
      }
      if (this.active === 2) {
        const configJson = this.$refs.baseConfig.getFinalFormData()
        const serializedConfigJson = JSON.stringify(configJson)
        // 创建选中任务
        this.$refs.jobTemplateList.createSelectedJob(serializedConfigJson, configJson.jobDesc)
      }
    },
    last() {
      if (this.active > 1) {
        this.active--
      }
    }
  }
}
</script>

<style scoped>
/* 添加样式 */
</style>
